<template>
  <el-dialog :title="titleName" custom-class="dict-dialog" width="580px"
             :visible.sync="visible"
             center
             :before-close="modelClose"
             @open="modelOpen"
             :close-on-click-modal="false">
    <el-form :rules="rules"
              ref="fieldHandleForm"
              :model="modelData"
              :disabled="formDisabled"
              v-loading="loading">
      <el-row :span="24" >
        <el-col :span="24">
          <el-form-item label="字典项名" :label-width="formLabelWidth" prop="key" >
            <el-input v-model.trim="modelData.key" maxlength="32" autocomplete="off" placeholder="请输入字典项key"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :span="24" >
        <el-col :span="24">
          <el-form-item label="启用状态" :label-width="formLabelWidth" prop="enable">
            <el-select v-model="modelData.enable" placeholder="选择是否启用" style="width: 450px">
              <el-option v-for="item of $enums.OTHERS" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="字典类型" :label-width="formLabelWidth" prop="value1" >
            <el-select v-model="modelData.valueType" placeholder="选择是否启用" style="width:100%">
              <el-option v-for="item of $enums.FIELD_TYPE" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :span="24" >
        <el-col :span="24">
          <el-form-item label="字典项值" :label-width="formLabelWidth" prop="value1" >
            <el-input v-model.trim="modelData.value1" maxlength="32" autocomplete="off" placeholder="请输入字典项value"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :span="24" >
        <el-col :span="24">
          <el-form-item label="字典描述" :label-width="formLabelWidth" prop="description" >
            <el-input v-model.trim="modelData.description" maxlength="32" autocomplete="off" placeholder="请输入字典项描述"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" v-if="btnVisible">
      <el-button type="primary" @click="formSubmit" :loading="loading">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  name: 'fieldMgrHandleDialog',
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    modelType: {
      type: String,
      required: true,
      default: () => {
        return 'info';
      },
    },
    modelData: {
      type: Object,
      default: () => {
        return {
          app: process.env.VUE_APP_SYSTEM_NAME,
          key: '',
          description: '',
          valueType: 1,
          value1: '',
        };
      },
    },
  },
  data() {
    return {
      titleName: '详情',
      formLabelWidth: '80px',
      dialogFormVisible: false,
      formDisabled: false,
      btnVisible: true,
      loading: false,
      rules: {
        key: this.$Validate.otherTxt(true, '请输入关键词名称'),
        value1: this.$Validate.otherTxt(true, '请输入字典项值'),
        description: this.$Validate.otherTxt(true, '请输入字典描述')
      }
    }
  },
  methods: {
    // 解决el-input莫名无法输入的问题
    change() {
      this.$forceUpdate();
    },
    // 对话框打开
    modelOpen() {
      switch (this.modelType) {
        case 'add':
          this.modelTypeChange('添加字典', false, true);
          break;
        case 'info':
          this.modelTypeChange('字典详情', true, false);
          break;
        case 'edit':
          this.modelTypeChange('编辑字典', false, true);
          break;
        default:
          break;
      }
    },
    // 模式切换
    modelTypeChange(titleName, formDisabled, btnVisible) {
      this.titleName = titleName;
      this.formDisabled = formDisabled;
      this.btnVisible = btnVisible;
    },
    // 提交表单
    formSubmit() {
      // 参数校验
      this.$refs.fieldHandleForm.validate((valid) => {
        if (valid) {
          switch (this.modelType) {
            // 添加字典
            case 'add':
              this.handleAdd(this.modelData);
              break;
            // 编辑字典
            case 'edit':
              this.handleEdit(this.modelData);
              break;
            default:
              break;
          }
        }
      });
    },
    // 新增
    handleAdd(formData) {
      this.loading = true;
      this.$api.dictFields
        .add(formData)
        .then((res) => {
          this.$message.success('添加字典项成功');
          this.loading = false;
          this.modelClose();
          this.$emit('loadList');
        })
        .catch((err) => {
          console.log(err);
          this.loading = false;
        });
    },
    // 编辑
    handleEdit(formData) {
      // 更新字典
      this.loading = true;
      this.$api.dictFields
        .update(formData)
        .then((res) => {
          this.$message.success('更新字典项成功');
          this.loading = false;
          this.modelClose();
          this.$emit('loadList');
        })
        .catch((err) => {
          this.loading = false;
        });
    },
    // 重置表单
    resetForm() {
      this.$nextTick(() => {
        this.$refs.fieldHandleForm.resetFields();
      });
    },
    // 对话框关闭
    modelClose() {
      // 重置表单
      this.resetForm();
      // 直接修改父组件的属性
      this.$emit('update:visible', false);
    },
  },
}
</script>

<style lang="scss" scope>
.menu-dialog {
  .el-dialog__body {
    max-height: 50vh;
  }
  .custom-height {
    .el-input__inner {
      height: 32px !important;
    }
  }
}
</style>
